<template>
  <view :class="{ 'beat-indicator': true, 'flash': isActive }">
    <text>{{ beat }}</text>
  </view>
</template>

<script>
export default {
  props: {
    beat: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      isActive: false,
    };
  },
  watch: {
    beat(newVal, oldVal) {
      if (newVal !== oldVal && newVal % this.$store.state.beatsPerMeasure === 0) {
        this.isActive = true;
        setTimeout(() => {
          this.isActive = false;
        }, 200);
      }
    },
  },
};
</script>

<style>
.beat-indicator {
  text-align: center;
  font-size: 24px;
  padding: 20px;
}

.flash {
  background-color: yellow;
  transition: background-color 0.2s;
}
</style>
